<script setup lang="ts">
import { ref } from "vue";
import { userLogin } from "@/utils/user";
import { ElMessage } from "element-plus";
import router from "@/router";
import {useLoginStore} from "@/stores/userStore";

const formRef = ref();
const loading = ref(false);
const userStore = useLoginStore()
const Form = ref({
  userAccount: '',
  userPassword: ''
});

const rules = {
  userAccount: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 15, message: '账户名必须是5-15位的非空字符', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        const accountPattern = /^\S{5,15}$/;
        if (!accountPattern.test(value)) {
          callback(new Error('用户名必须是5-15位的非空字符'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{8,15}$/, message: '密码必须是6-15位的非空字符', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        const passwordPattern = /^\S{8,15}$/;
        if (!passwordPattern.test(value)) {
          callback(new Error('密码必须是6-15位的非空字符'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

const submitForm = async () => {
  try {
    await formRef.value.validate();
    loading.value = true;

  } catch (error) {
    ElMessage.error('表单验证失败');
  } finally {
    loading.value = false;
  }
  const res = await userLogin(Form.value);
  console.log(res.data.data.id)
  ElMessage.success('登录成功');
  await router.push('/main')
  userStore.setCookie(res.data.data.id)
};

const resetForm = () => {
  Form.value.userPassword = '';
  Form.value.userAccount = '';
};
</script>

<template>
  <div class="layout">
    <el-container class="container">
      <!-- Header Content -->
      <el-header class="header">
        <div class="header-content">
          <img src="@/assets/logo.svg" alt="鱼籽代码生成器" class="logo animate-logo">
          <div class="title-group">
            <h1 class="title">鱼籽-代码生成器</h1>
            <p class="subtitle">可视化配置 · 一键生成 · 高效开发</p>
          </div>
        </div>
      </el-header>

      <!-- Little Title -->
      <div class="little-title">
        <span>用户登录</span>
        <div class="decorative-line"></div>
      </div>

      <!-- Main Content -->
      <el-main class="main">
        <div class="form-container">
          <el-form
            ref="formRef"
            :model="Form"
            status-icon
            :rules="rules"
            label-width="auto"
            class="login-form"
          >
            <el-form-item label="账号" prop="userAccount">
              <el-input v-model="Form.userAccount" type="text" autocomplete="off" placeholder="请输入5-15位的用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="userPassword">
              <el-input v-model="Form.userPassword" type="password" autocomplete="off" placeholder="请输入8-15位的密码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" :loading="loading">登录</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
          <router-link to="/register">还没有账号？ 去注册</router-link>
        </div>
      </el-main>

      <!-- Footer Content -->
      <el-footer class="footer">
        <div class="footer-content">
          <a href="https://gitee.com/wangfenghuan3399/yuzi-generator" target="_blank" class="footer-link">
            <img src="@/assets/gitee.svg" alt="Gitee开源仓库" class="gitee-logo">
            <span class="footer-text">鱼籽代码生成器-Gitee 开源仓库</span>
          </a>
        </div>
      </el-footer>
    </el-container>

    <!-- 背景装饰元素 -->
    <div class="bg-decorations">
      <div class="bg-circle-1"></div>
      <div class="bg-circle-2"></div>
      <div class="bg-grid"></div>
    </div>
  </div>
</template>

<style scoped lang="less">
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.layout {
  height: 100vh;
  background: linear-gradient(135deg, #f8f9ff 0%, #e6f0ff 100%);
  position: relative;
  overflow: hidden;

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
  }

  .header {
    padding: 30px 0;
    background: transparent;

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 25px;
      padding: 0 20px;

      .logo {
        width: 80px;
        height: 80px;
        filter: drop-shadow(0 4px 12px rgba(64, 158, 255, 0.2));
        transition: all 0.3s ease;

        &.animate-logo:hover {
          transform: rotate(-5deg) scale(1.05);
          filter: drop-shadow(0 6px 16px rgba(64, 158, 255, 0.3));
        }
      }

      .title-group {
        .title {
          margin: 0;
          font-size: 36px;
          color: #2c3e50;
          font-family: '阿里妈妈数黑体 Bold', sans-serif;
          background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
        }

        .subtitle {
          margin: 8px 0 0;
          font-size: 16px;
          color: #7f8c8d;
          letter-spacing: 2px;
          font-weight: 300;
        }
      }
    }
  }

  .little-title {
    text-align: center;
    margin: 20px 0;
    position: relative;

    span {
      display: inline-block;
      font-size: 24px;
      color: #409EFF;
      font-weight: 500;
      padding: 0 20px;
      background: linear-gradient(to right,
      rgba(64, 158, 255, 0.1) 0%,
      rgba(64, 158, 255, 0.3) 50%,
      rgba(64, 158, 255, 0.1) 100%);
      border-radius: 8px;
    }

    .decorative-line {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right,
      transparent 0%,
      rgba(64, 158, 255, 0.3) 50%,
      transparent 100%);
      z-index: -1;
    }
  }

  .main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;

    .form-container {
      width: 100%;
      max-width: 480px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(64, 158, 255, 0.1);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .login-form {
      :deep(.el-form-item__label) {
        font-weight: 500;
        color: #606266;
        font-size: 15px;
      }

      .el-input {
        font-size: 16px;
        border-radius: 8px;

        &:hover :deep(.el-input__wrapper) {
          box-shadow: 0 0 0 1px #409EFF inset;
        }
      }

      .action-btns {
        margin-top: 40px;

        .el-button {
          width: 140px;
          border-radius: 8px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &:active {
            transform: scale(0.96);
          }
        }
      }
    }
  }

  .footer {
    background: transparent;
    padding: 20px 0;

    &-content {
      .footer-link {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);

          .footer-text {
            color: #409EFF;
          }

          .gitee-logo {
            filter: brightness(1.2);
          }
        }
      }

      .footer-text {
        color: #7f8c8d;
        font-size: 14px;
        transition: color 0.3s ease;
      }

      .gitee-logo {
        width: 28px;
        height: 28px;
        transition: all 0.3s ease;
      }
    }
  }

  // 背景装饰
  .bg-decorations {
    .bg-circle-1,
    .bg-circle-2 {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle,
      rgba(64, 158, 255, 0.1) 0%, // 提高透明度
      rgba(64, 158, 255, 0.05) 70%); // 提高透明度
      filter: blur(30px); // 减少模糊程度以增强可见性
      z-index: 1;
      box-shadow: 0 0 20px rgba(64, 158, 255, 0.3); // 添加阴影效果
    }

    .bg-circle-1 {
      width: 800px; // 增加宽度
      height: 800px; // 增加高度
      top: -25%; // 调整位置
      right: -15%; // 调整位置
      animation: float 10s ease-in-out infinite; // 延长动画时间
    }

    .bg-circle-2 {
      width: 600px; // 增加宽度
      height: 600px; // 增加高度
      bottom: -15%; // 调整位置
      left: -10%; // 调整位置
      animation: float 8s ease-in-out infinite; // 延长动画时间
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); } // 增加浮动距离
    }
  }
}

@media (max-width: 768px) {
  .layout {
    .header {
      padding: 20px 0;

      &-content {
        flex-direction: column;
        text-align: center;

        .logo {
          width: 70px;
          height: 70px;
        }

        .title-group {
          .title {
            font-size: 28px;
          }
          .subtitle {
            font-size: 14px;
          }
        }
      }
    }

    .little-title span {
      font-size: 20px;
    }

    .main {
      padding: 20px;

      .form-container {
        padding: 30px 20px;
      }
    }
  }
}
</style>
